<template>
  <div id="commentMsg">
    <div v-if="isEmpty(commentList)" class="head-message">暂无留言内容</div>
    <div v-else class="head-message">回复列表({{commentList.length}})</div>
    <comment
      @handleReply="handleReply"
      v-for="(item1, index) in commentList"
      :key="'parent-' + index"
      :comment="item1"
    >
      <!-- 二层留言 -->
      <template #childComment v-if="!isEmpty(item1.children)">
        <comment
          v-for="(item2, index) in item1.children"
          :key="'children-' + index"
          :comment="item2"
          @handleReply="handleReply"
        ></comment>
      </template>
    </comment>
  </div>
</template>

<script>
import Comment from './Comment.vue'
// import Vue from 'vue'

export default {
  name: 'CommentMessage',
  components: {
    Comment,
  },
  props: {
    commentList: {
      type: Array,
      default: [],
    },
  },
  methods: {
    isEmpty(ls) {
      return ls.length === 0
    },
    handleReply(data) {
      this.$emit('handleReply', {
        msgId: data.msgId,
        msgUsername: data.msgUsername,
      })
    },
  },
}
</script>

<style scoped>
.head-message {
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}
</style>
